<div class="hero mv-single-hero">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

      </div>
    </div>
  </div>
</div>
<div class="page-single movie-single movie_single">
  <div class="container">
    <div class="row ipad-width2">
      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="movie-img sticky-sb">
          <img [src]="movie['cover']">
          <div class="movie-btn">
            <div class="btn-transform transform-vertical red">
              <div><a class="item item-1 redbtn" href="javascript:void(0)"> <i
                class="ion-play"></i>{{movie['name']}}</a></div>
              <div><a class="item item-2 redbtn fancybox-media hvr-grow" href="javascript:void(0)"><i
                class="ion-play"></i></a></div>
            </div>
            <div class="btn-transform transform-vertical">
              <div><span class="item item-1 yellowbtn"> <i class="ion-card"></i>
                {{movie['initialReleaseDate']}}</span></div>
              <div><a href="javascript:void(0)" class="item item-2 yellowbtn"><i class="ion-card"></i></a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8 col-sm-12 col-xs-12">
        <div class="movie-single-ct main-content">
          <h1 class="bd-hd">{{movie['name']}} <span>{{movie['initialReleaseDate']}}</span></h1>
          <div class="social-btn">
            <a class="parent-btn" (click)="favorite(movie['id'])"><i class="ion-heart"></i>
              {{isFavorite?'取消收藏':'收藏'}}</a>
            <div class="hover-bnt">
              <!--  <a href="#" class="parent-btn"><i class="ion-android-share-alt"></i>分享</a>
                <div class="hvr-item">
                  <a href="#" class="hvr-grow"><i class="ion-social-facebook"></i></a>
                  <a href="#" class="hvr-grow"><i class="ion-social-twitter"></i></a>
                  <a href="#" class="hvr-grow"><i class="ion-social-googleplus"></i></a>
                  <a href="#" class="hvr-grow"><i class="ion-social-youtube"></i></a>
                </div>-->
            </div>
          </div>
          <div class="movie-rate">
            <div class="rate">
              <i class="ion-android-star"></i>
              <p><span>{{realRate}}</span> /10<br>
              </p>
            </div>
            <div class="rate-star">
              <p>给该电影打分: </p>
              <i *ngFor="let i of rates"
                 [ngClass]="{'ion-ios-star':rate>=i,'ion-ios-star-outline':rate<i}"
                 style="cursor: pointer" (mouseover)="doOnmouseover(i)" (mouseleave)="doOnMouseMove()"
                 (click)="lockRate(i)"
              ></i>
              <!--<i class="ion-ios-star-outline"></i>-->
            </div>
          </div>
          <div class="movie-tabs">
            <div class="tabs">
              <ul class="tab-links tabs-mv">
                <!-- <li class="active"><a href="#movie-info">电影信息</a></li>
                 <li><a href="#introduction"> 简介</a></li>
                 <li><a href="#media"> 相关视频</a></li>
                 <li><a href="#similar-movie"> 相似作品</a></li>-->
                <li><a (click)="movieTab=0" style="cursor: pointer">电影信息</a></li>
                <li><a (click)="movieTab=1" style="cursor: pointer"> 简介</a></li>
                <li><a (click)="movieTab=2" style="cursor: pointer"> 剧照</a></li>
                <li><a (click)="movieTab=3" style="cursor: pointer"> 电影评论</a></li>
              </ul>
              <div class="tab-content">
                <div *ngIf="movieTab==0" id="movie-info" class="tab active">
                  <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12">
                      <table class=".am-table-bordered" style="color: rgb(255,254,242);">
                        <tr>
                          <td>主演</td>
                          <td>{{movie['actors']}}</td>
                        </tr>
                        <tr>
                          <td>导演</td>
                          <td>{{movie['directors']}}</td>
                        </tr>
                        <tr>
                          <td>类型</td>
                          <td>{{movie['types']}}</td>
                        </tr>
                        <tr>
                          <td>语言</td>
                          <td>{{movie['languages']}}</td>
                        </tr>
                        <tr>
                          <td>地区</td>
                          <td>{{movie['areas']}}</td>
                        </tr>
                        <tr>
                          <td>片长</td>
                          <td>{{movie['duration']}}</td>
                        </tr>
                        <tr>
                          <td>上映日期</td>
                          <td>{{movie['initialReleaseDate']}}</td>
                        </tr>
                      </table>

                    </div>
                  </div>
                </div>
                <div *ngIf="movieTab==1" id="introduction" class="tab active" style="margin-left: 10px" >
                  <div class="row">
                    <div class="rv-hd">
                      <div class="div">
                        <h2>{{movie['name']}}</h2>
                      </div>
                    </div>
                    <div class="topbar-filter">
                      <p>剧情简介</p>
                    </div>
                    <div class="mv-user-review-item" style="width: 98%;">
                      <p style="font-size: medium">{{movie['introduction']}}</p>
                    </div>

                  </div>
                </div>
                <div *ngIf="movieTab==2" style="margin-left: 10px" id="media" class="tab active">
                  <div class="row">
                    <div class="title-hd-sm">
                      <h4>剧照
                        <span>({{movie.photos===null||movie.photos.length===0?'无':movie.photos.length}})</span>
                      </h4>
                    </div>
                    <div class="mvsingle-item media-item">
                      <div class="row">
                        <!--<div class="col-xs-6 col-md-3" *ngFor="let photo of movie.photos">-->
                        <div class="col-md-4" *ngFor="let photo of movie.photos">
                          <a [href]="photo" target="_blank" class="thumbnail">
                            <img [src]="photo" style="width: 230px;height: 140px;background-size: cover">
                          </a>
                        </div>
                      </div>

                    </div>
                    <div class="title-hd-sm">
                      <h4>剧照大图 <span> ({{movie.photos===null||movie.photos.length===0?'无':movie.photos.length}})</span>
                      </h4>
                    </div>
                    <div class="mvsingle-item">
                      <a class="img-lightbox" data-fancybox-group="gallery" *ngFor="let photo of movie.photos"
                         [href]="photo" target="_blank">
                        <img [src]="photo" alt=""></a>
                    </div>
                  </div>
                </div>
                <div *ngIf="movieTab==3" style="margin-left: 10px" id="comment" class="tab active">
                  <!-- 电影评论-->
                  <div class="page-single">
                    <div class="container" style="width: 100%">
                      <div class="row">
                        <div class="col-md-9 col-sm-12 col-xs-12">
                          <div class="blog-detail-ct">
                            <!-- comment items -->
                            <div class="comments">
                              <h4>{{comments.length}} 条评论</h4>
                              <!-- blog list section-->
                              <div class="page-single" style="width: 100%; height: 100%;">
                                <div class="container">
                                  <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                      <div class="blog-item-style-1 blog-item-style-3" *ngFor="let comment of comments">
                                        <img
                                          [src]="comment.user.head===null?'/assets/images/default/defaultHead.png':comment.user.head"
                                          style="width: 100px;height: 100px">
                                        <div class="blog-it-infor">
                                          <h3>{{comment.title}}</h3>
                                          <i *ngFor="let i of rates" [ngClass]="{'ion-android-star':comment.rate>=i}"
                                             style="color: yellow"></i>
                                          <br>
                                          <span class="time">
                                            作者:<span>{{comment.user.nickname}}</span>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            发表时间:{{comment.createTime}}
                                          </span>
                                          <p>{{comment.content}}</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="comment-form">
                              <h4>发表评论</h4>
                              <form action="#">
                                <div class="row">
                                  <div class="col-md-12">
                                    <input type="text" name="title" placeholder="标题" [(ngModel)]="commentSubject.title">
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-md-12">
                                    <textarea name="message" id="" placeholder="评论内容"
                                              [(ngModel)]="commentSubject.content"></textarea>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-md-12">
                                    <div class="topbar-filter fw">
                                      <label>顺便给该电影打个分吧 :</label>
                                      <label>
                                        <select (change)="changeCommentRate($event.target.value)">
                                          <option *ngFor="let i of rates">
                                            {{i}}
                                          </option>
                                        </select>
                                      </label>
                                    </div>
                                  </div>
                                </div>
                                <input class="submit" type="button" (click)="submitComment()" placeholder="submit"
                                       value="发布评论">
                              </form>
                            </div>
                            <!-- comment form -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 电影评论-->
                </div>

              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>




